<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>my_bilibili</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./font/iconfont.css">
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/element-ui.css">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <div id="app">
    <div class="suspension">
      <div class="suspension-box">
        <div class="m-navbar">
          <a href="#" class="logo">
            <i class="iconfont Navbar_logo"></i>
          </a>
          <div class="right">
            <a href="#" class="search">
              <i class="iconfont ic_search_tab"></i>
            </a>
            <a href="#" class="login">
              <img src="./images/login.png" alt="">
            </a>
            <a href="#" class="download">
              <img src="./images/download.png" alt="">
            </a>
          </div>
        </div>
        <div class="channel-menu">
          <!-- 频道导航 -->
          <div class="channel">
            <ul ref="scroll" @touchstart="scrollTouchstart" @touchmove="scrollTouchmove" @touchend="scrollTouchend">
              <a href="#" style="color: #fb7299;position: relative;">
                <span>首页</span>
                <div class="highline"></div>
              </a>
              <a href="#"><span>动画</span></a>
              <a href="#"><span>番剧</span></a>
              <a href="#"><span>国创</span></a>
              <a href="#"><span>音乐</span></a>
              <a href="#"><span>舞蹈</span></a>
              <a href="#"><span>游戏</span></a>
              <a href="#"><span>知识</span></a>
              <a href="#"><span>科技</span></a>
              <a href="#"><span>运动</span></a>
              <a href="#"><span>汽车</span></a>
              <a href="#"><span>生活</span></a>
              <a href="#"><span>美食</span></a>
              <a href="#"><span>动物圈</span></a>
              <a href="#"><span>鬼畜</span></a>
              <a href="#"><span>时尚</span></a>
              <a href="#"><span>娱乐</span></a>
              <a href="#"><span>影视</span></a>
              <a href="#"><span>纪录片</span></a>
              <a href="#"><span>电影</span></a>
              <a href="#"><span>电视剧</span></a>
              <a href="#"><span>直播</span></a>
              <a href="#"><span>相簿</span></a>
              <!-- <div class="highline"></div> -->
            </ul>
          </div>
          <!-- 展开抽屉 -->
          <div class="expand" @click="drawer = true">
            <i class="iconfont general_pulldown_s"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="m-home">
      <div class="vedio-list-box swiper-container">
        <div class="vedio-box swiper-wrapper">
          <div class="swiper-slide">
            <!-- 1 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic1.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    104.4万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    8842
                  </span>
                </div>
              </div>
              <p class="title">干！净！又！卫！生！的芦荟汁！送给史上最爱蹭饭的朋友们</p>
            </a>
            <!-- 2 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic2.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    96万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    28.7万
                  </span>
                </div>
              </div>
              <p class="title">【时代少年团】《光环中的少年——“踯躅”》（上）</p>
            </a>
          </div>
          <div class="swiper-slide">
            <!-- 3 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic3.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    66.5万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    668
                  </span>
                </div>
              </div>
              <p class="title">高中生的作词能力有多强</p>
            </a>
            <!-- 4 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic4.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    114.1万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    1515
                  </span>
                </div>
              </div>
              <p class="title">一个动作让鼻塞快速通气！附简单高效的止鼻涕方法推荐</p>
            </a>
          </div>
          <div class="swiper-slide">
            <!-- 5 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic5.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    79.8万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    198
                  </span>
                </div>
              </div>
              <p class="title">这不是PPT技术，是PPT魔术吧</p>
            </a>
            <!-- 6 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic6.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    80.5万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    4483
                  </span>
                </div>
              </div>
              <p class="title">帅小伙《 高 端 料 理 》</p>
            </a>
          </div>
          <div class="swiper-slide">
            <!-- 7 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic7.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    27.4万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    6984
                  </span>
                </div>
              </div>
              <p class="title">【600W粉抽奖】感谢大家的支持。</p>
            </a>
            <!-- 8 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic8.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    79.4万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    1616
                  </span>
                </div>
              </div>
              <p class="title">【诸神黄昏】如何永久告别流氓软件？全网最强流氓软件清除攻略！！！</p>
            </a>
          </div>
          <div class="swiper-slide">
            <!-- 9 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic9.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    120.2万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    1217
                  </span>
                </div>
              </div>
              <p class="title">元 辅 导</p>
            </a>
            <!-- 10 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic10.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    164.6万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    1490
                  </span>
                </div>
              </div>
              <p class="title">当老师在几百人的数学课上放我的视频</p>
            </a>
          </div>
          <div class="swiper-slide">
            <!-- 11 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic11.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    314.9万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    2.6万
                  </span>
                </div>
              </div>
              <p class="title">【亮记生物鉴定】网络热传生物鉴定35</p>
            </a>
            <!-- 12 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic12.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    23.7万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    477
                  </span>
                </div>
              </div>
              <p class="title">肘，跟我进屋</p>
            </a>
          </div>
          <div class="swiper-slide">
            <!-- 13 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic13.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    54.6万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    7558
                  </span>
                </div>
              </div>
              <p class="title">这也有人做？你可能没看过的小众视频类型大赏！</p>
            </a>
            <!-- 14 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic14.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    27.5万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    4335
                  </span>
                </div>
              </div>
              <p class="title">【啊粥】人民的名义08:沙瑞金的领导力到底有多强？</p>
            </a>
          </div>
          <div class="swiper-slide">
            <!-- 15 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic15.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    58.8万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    5896
                  </span>
                </div>
              </div>
              <p class="title">116元的小猪佩奇游戏</p>
            </a>
            <!-- 16 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic16.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    82.2万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    4952
                  </span>
                </div>
              </div>
              <p class="title">职场饭局生存法则｜商务宴请全流程演示</p>
            </a>
          </div>
          <div class="swiper-slide">
            <!-- 17 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic17.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    93.9万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    1621
                  </span>
                </div>
              </div>
              <p class="title">【4K60FPS】共和时代《Counting Stars》核能现场！一起来数星星吧！</p>
            </a>
            <!-- 18 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic18.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    284.5万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    2万
                  </span>
                </div>
              </div>
              <p class="title">百变马丁（原马丁的早晨）第二季</p>
            </a>
          </div>
          <div class="swiper-slide">
            <!-- 19 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic19.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    38.3万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    2864
                  </span>
                </div>
              </div>
              <p class="title">探访全球最贵牛排，黄金战斧！！10000元一块的牛排什么味道？</p>
            </a>
            <!-- 20 -->
            <a href="#">
              <div class="box">
                <img src="./images/pic20.jpg" alt="">
                <div class="count">
                  <span>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    76.6万
                  </span>
                  <span><i class="iconfont icon_shipin_danmushu"></i>
                    1232
                  </span>
                </div>
              </div>
              <p class="title">厦大｜我用虚高的分数线买了四年浪漫</p>
            </a>
          </div>
        </div>
      </div>
      <div class="bottombtn">
        <div class="open-app">
          <i class="iconfont Navbar_logo"></i>
          <span>打开App，看你感兴趣的视频</span>
        </div>
      </div>
    </div>
    <el-drawer :visible.sync="drawer" :with-header="false" direction="ttb" size="160px" :modal-append-to-body="false"
      ref="draw" open=>
      <div class="drawer-box">
        <a href="#" class="link-item">首页</a>
        <a href="#" class="link-item">动画</a>
        <a href="#" class="link-item">番剧</a>
        <a href="#" class="link-item">国创</a>
        <a href="#" class="link-item">音乐</a>
        <a href="#" class="link-item">舞蹈</a>
        <a href="#" class="link-item">游戏</a>
        <a href="#" class="link-item">知识</a>
        <a href="#" class="link-item">科技</a>
        <a href="#" class="link-item">运动</a>
        <a href="#" class="link-item">汽车</a>
        <a href="#" class="link-item">生活</a>
        <a href="#" class="link-item">美食</a>
        <a href="#" class="link-item">动物圈</a>
        <a href="#" class="link-item">鬼畜</a>
        <a href="#" class="link-item">时尚</a>
        <a href="#" class="link-item">娱乐</a>
        <a href="#" class="link-item">影视</a>
        <a href="#" class="link-item">纪录片</a>
        <a href="#" class="link-item">电影</a>
        <a href="#" class="link-item">电视剧</a>
        <a href="#" class="link-item">直播</a>
        <a href="#" class="link-item">相簿</a>
        <i class="iconfont general_pullup_s" @click="closeDrawer"></i>
      </div>
    </el-drawer>
  </div>
  <script src="./js/vue.js"></script>
  <script src="./js/element-ui.js"></script>
  <!-- Swiper JS -->
  <script src="./js/swiper.min.js"></script>
  <script>
    // vue
    new Vue({
      el: '#app',
      data() {
        return {
          drawer: false,
          startX: 0,
          centerX: 0
        }
      },
      mounted() {
        // 右侧小通知
        this.$notify({
          message: '功能开发中...',
          duration: 3000,
          iconClass: 'el-icon-message-solid',
          showClose: false,
          onClick() {
            this.$notify.closeAll()
          }
        })
        // let startX = 0 // 刚触碰到屏幕的时的手指信息
        // let centerX = 0 // 用来记录每次触摸时上一次的偏移距离
        // let MaxLeft = (scroll.offsetWidth - scroll.scrollWidth) //向左偏移最大距离
        // touchstart 时，记录手指在 X 轴距离左侧距离
        // scroll.addEventListener('touchstart', function (e) {
        //   startX = e.changedTouches[0].clientX;
        // })
        // touchmove 时，记录此时手指在 X 轴距离左侧距离
        // scroll.addEventListener('touchmove', function (e) {
        // 获取差值
        // let d = e.changedTouches[0].clientX - startX;
        // 上次的滑动距离加上本次的滑动距离
        // let tempX = centerX + d;
        // let MaxLeft = (scroll.offsetWidth - scroll.scrollWidth)
        // 设置滑动区间
        // if (tempX > 0) tempX = 0
        // else if (tempX < MaxLeft) tempX = MaxLeft
        // 设置 scroll 在 X 轴上的偏移
        // scroll.style.transform = 'translateX(' + tempX + 'px)';
        // })
        // touchend 时，记录此时手指在 X 轴距离左侧距离
        // scroll.addEventListener('touchend', function (e) {
        // 获取差值
        // let d = e.changedTouches[0].clientX - startX;
        // 记录移动的距离
        // centerX = centerX + d;
        // 到达导航两侧不再增加移动距离
        //   if (centerX > 0) centerX = 0
        //   else if (centerX < MaxLeft) centerX = MaxLeft
        // })
        var swiper = new Swiper('.swiper-container', {
          slidesPerView: 'auto',
          freeMode: true,
          direction: 'vertical',
        })
      },
      methods: {
        closeDrawer() {
          this.$refs.draw.closeDrawer()
        },
        scrollTouchstart(e) {
          this.startX = e.changedTouches[0].clientX
        },
        scrollTouchmove(e) {
          let d = e.changedTouches[0].clientX - this.startX
          let tempX = this.centerX + d
          if (tempX > 0) tempX = 0
          else if (tempX < this.MaxLeft) tempX = this.MaxLeft
          this.$refs.scroll.style.transform = 'translateX(' + tempX + 'px)'
        },
        scrollTouchend(e) {
          let d = e.changedTouches[0].clientX - this.startX
          this.centerX += d
          if (this.centerX > 0) this.centerX = 0
          else if (this.centerX < this.MaxLeft) this.centerX = this.MaxLeft
        }
      },
      computed: {
        MaxLeft() {
          return this.$refs.scroll.offsetWidth - this.$refs.scroll.scrollWidth
        }
      }
    })
  </script>
</body>

</html>